<template>
  <!-- video-player-box ==> video-player vjs-custom-skin -->
<!--  <video :src="resourceUrl"></video>-->
  <video
    :src="resourceUrl"
    muted="muted"
    controls
    class="elementor-video"
  />
<!--  <video-player-->
<!--    ref="videoPlayer"-->
<!--    class="video-player vjs-custom-skin"-->
<!--    :options="playerOptions"-->
<!--    :playsinline="true"-->
<!--  />-->
</template>

<script>
// 需要添加的配置
// videojs -- videoPlayer 核心
// import videojs from 'video.js'
// import 'vue-video-player/src/custom-theme.css'
// // 根据官方文档配置发现没有效果
// import 'video.js/dist/video-js.css'
// import { videoPlayer } from 'vue-video-player'
export default {
  components: {
    // videoPlayer
  },
  props: {
    resourceUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      playerOptions: {
        muted: true,
        language: 'zh',
        sources: [{
          type: 'video/mp4',
          // src: 'http://8.134.32.9:9000/arbook/463378686224454/20240118/c086f3aeb5e811eebb0300163e01898d.mp3'
          src: ''
          // src: 'http://8.134.32.9:9000/arbook/463378686224454/20240116/030a86c8b46d11eea5d400163e01898d.mp4'
        }],
        poster: ''
      }
    }
  },
  created() {
    this.playerOptions.sources[0].src = this.resourceUrl
  }
}
</script>
<style scoped lang="scss">
.elementor-video {
  width: 100%;
  height: auto;
}
</style>
